import { useState, createElement, forwardRef, CSSProperties } from 'react';
import '../../assets/fonts/fonts.scss';
import './index.scss';

export interface TopNavigationItem {
  key: string;
  title: string;
  href?: string;
  onClick?: () => void;
  disabled?: boolean;
}

export type NavAlignment = 'left' | 'center' | 'right';

export interface TopNavigationProps {
  /** 导航项数据 */
  items?: TopNavigationItem[];
  /** 默认激活的导航项key */
  defaultActiveKey?: string;
  /** 受控模式下的激活key */
  activeKey?: string;
  /** 导航项点击回调 */
  onItemClick?: (key: string, item: TopNavigationItem) => void;
  
  // 基础配置
  /** 导航项对齐方式 */
  alignment?: NavAlignment;
  /** 组件高度 */
  height?: number;
  
  // 颜色配置
  /** 背景颜色 */
  backgroundColor?: string;
  /** 激活项颜色 */
  activeColor?: string;
  /** 普通文字颜色 */
  textColor?: string;
  
  // 字体配置
  /** 字体大小 */
  fontSize?: number;
  /** 字体粗细 */
  fontWeight?: number | string;
  
  // 自定义样式
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: CSSProperties;
}

const TopNavigation = forwardRef<HTMLDivElement, TopNavigationProps>(({
  items = [
    { key: 'home', title: '首页' },
    { key: 'travel', title: '出行服务' },
    { key: 'emergency', title: '应急管理' },
    { key: 'environment', title: '气象防灾' },
    { key: 'energy', title: '消防安全' },
    { key: 'government', title: '综合执法' },
    { key: 'smart-community', title: '员工管理' },
    { key: 'smart-security', title: '设施环境' },
    { key: 'smart-water', title: '城站专题' }
  ],
  defaultActiveKey = 'home',
  activeKey,
  onItemClick,
  
  // 基础配置
  alignment = 'right',
  height = 80,
  
  // 颜色配置
  backgroundColor = 'transparent',
  activeColor = '#ffffff',
  textColor = 'rgba(255, 255, 255, 0.8)',
  
  // 字体配置
  fontSize = 28,
  fontWeight = 400,
  
  // 自定义样式
  className = '',
  style,
}, ref) => {
  const [internalActiveKey, setInternalActiveKey] = useState(defaultActiveKey);
  
  // 使用受控模式或非受控模式
  const currentActiveKey = activeKey !== undefined ? activeKey : internalActiveKey;

  const handleItemClick = (key: string, item: TopNavigationItem) => {
    if (item.disabled) return;
    
    // 非受控模式下更新内部状态
    if (activeKey === undefined) {
      setInternalActiveKey(key);
    }
    
    // 触发回调
    if (onItemClick) {
      onItemClick(key, item);
    }
    
    // 处理点击行为
    if (item.onClick) {
      item.onClick();
    } else if (item.href) {
      window.location.href = item.href;
    }
  };

  const getAlignmentStyle = (): CSSProperties => {
    switch (alignment) {
      case 'left': return { justifyContent: 'flex-start' };
      case 'center': return { justifyContent: 'center' };
      case 'right': return { justifyContent: 'flex-end' };
      default: return { justifyContent: 'flex-end' };
    }
  };

  const renderNavItem = (item: TopNavigationItem, isActive: boolean) => {
    const itemClasses = [
      'nav-item',
      isActive ? 'active' : '',
      item.disabled ? 'disabled' : ''
    ].filter(Boolean).join(' ');

    const textStyle: CSSProperties = {
      color: isActive ? activeColor : textColor,
      fontSize: fontSize,
      fontWeight: isActive ? 600 : fontWeight,
      cursor: item.disabled ? 'not-allowed' : 'pointer',
      padding: '10px 20px',
      transition: 'all 0.3s ease',
      fontFamily: 'PangMenZhengDao, SourceHanSansSC, sans-serif'
    };

    return createElement('div', {
      key: item.key,
      className: itemClasses,
      style: textStyle,
      onClick: () => handleItemClick(item.key, item),
    }, item.title);
  };

  const containerStyle: CSSProperties = {
    height: height,
    backgroundColor: backgroundColor,
    display: 'flex',
    alignItems: 'center',
    padding: '0 20px',
    ...style
  };

  const navContainerStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    gap: '26px',
    width: '100%',
    ...getAlignmentStyle()
  };

  const containerClasses = [
    'top-navigation',
    className
  ].filter(Boolean).join(' ');

  return createElement('div', {
    ref,
    className: containerClasses,
    style: containerStyle
  }, [
    createElement('div', {
      key: 'nav-container',
      style: navContainerStyle
    }, items.map(item => renderNavItem(item, currentActiveKey === item.key)))
  ]);
});

TopNavigation.displayName = 'TopNavigation';

export default TopNavigation; 